<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="../../include.inc.jsp"%>
<link rel="stylesheet" type="text/css" href="${contextPath}/static/assets/css/bootstrap-datepicker3.css" />
<div class="row">
    <div class="col-lg-12">
        <form id="formDlg" class="form-horizontal" role="form" enctype="multipart/form-data" method="post">
            <input type="hidden" id="id" name="id" value="${employee.id}" />
            <input type="hidden" id="id" name="user.id" value="${employee.user.id}" />
            <!-- 数据权限 -->
            <input type="hidden" id="organizationId" name="organization.id" value="${organizationId}" /> 
            <div class="form-group">
                <label class="col-lg-2 control-label">所属科室:</label><span class="text-danger">*</span>
                <div class="col-lg-9">
                    <input type="hidden" class="form-control" id="departmentId" name="department.id" value="${employee.department.id}" />
                    <input type="text" readonly="readonly" class="form-control" id="departmentName" name="departmentName" value="${employee.department.name}" onclick="selectDepartment();"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-2 control-label">手机号:</label><span class="text-danger">*</span>
                <div class="col-lg-9">
                    <input type="text" class="form-control" id="mobile" maxlength="11" name="user.mobile" value="${employee.user.mobile}" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-2 control-label">姓名:</label>
                <div class="col-lg-9">
                    <input type="text" class="form-control" id="name" name="name" value="${employee.name}" maxlength="30" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-2 control-label">照片:</label>
                <div class="col-lg-9" id="photoDiv">
                    <input type="hidden" id="photoName" name="photoName" value="${employee.photoName}"/>
                    <input type="hidden" id="photoImg" name="photoImg" value="${employee.photoImg}"/>
                    <input type="hidden" id="photoUrl" name="photoUrl" value="${employee.photoUrl}"/>
                    <c:if test="${employee.photoImg == '' || employee.photoImg == null}">
                        <input type="file" id="photoImgFile" name="photoImgFile" />
                    </c:if>
                    <c:if test="${employee.photoImg != '' && employee.photoImg != null}">
                        <ul class="attachment-list pull-left list-unstyled">
                            <li>
                                <a href="#" class="attached-file" title="预览" onclick="downloadImg('${employee.id}');" >
                                    <i class="ace-icon fa fa-file-o bigger-100"></i>
                                    <span>${employee.photoName}</span>
                                </a>
                                <span class="action-buttons">
                                    <a href="#" onclick="deleteImg(this,'${employee.id}','photoImgFile','photoDiv');" title="删除">
                                        <i class="ace-icon fa fa-trash-o bigger-120 red"></i>
                                    </a>
                                </span>
                            </li>
                        </ul>
                    </c:if>
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-2 control-label">性别:</label>
                <div class="col-lg-9">
                    <x:dictData dictCode="Sex_Type" var="sexTypes">
                        <x:select var="sex" items="${sexTypes}" id="sex" name="sex" className="form-control">
                            <x:option value="${sex.code }" text="${sex.name }" selected="${employee.sex eq sex.code}"></x:option>
                        </x:select>
                    </x:dictData>
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-2 control-label">生日:</label>
                <div class="col-lg-9">
                    <input type="text" readonly="readonly" class="form-control" id="birthday" name="birthday" value="<fmt:formatDate value="${employee.birthday}" pattern="yyyy-MM-dd"/>" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-2 control-label">职务:</label>
                <div class="col-lg-9">
                    <input type="text" class="form-control" id="postJob" name="postJob" value="${employee.postJob}" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-2 control-label">详细地址:</label>
                <div class="col-lg-9">
                    <textarea class="form-control" id="address" name="address" maxlength="225">${employee.address}</textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-2 control-label">职工介绍:</label>
                <div class="col-lg-9">
                    <textarea class="form-control" id="remark" name="remark">${employee.remark}</textarea>
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-2 control-label">是否推荐:</label>
                <div class="col-lg-9">
                    <x:dictData dictCode="Is_Recommend" var="isRecommends">
                        <x:select var="isRecommend" items="${isRecommends}" id="isRecommend" name="isRecommend" className="form-control">
                            <x:option value="${isRecommend.code }" text="${isRecommend.name }" selected="${employee.isRecommend eq isRecommend.code}"></x:option>
                        </x:select>
                    </x:dictData>
                </div>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="${contextPath}/static/assets/js/date-time/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="${contextPath}/static/assets/js/date-time/bootstrap-datepicker.zh-CN.js"></script>
<script type="text/javascript" src="${contextPath}/static/assets/js/jquery.hotkeys.js"></script>
<script type="text/javascript" src="${contextPath}/static/assets/js/bootstrap-wysiwyg.js"></script>
<script type="text/javascript">
function selectDepartment(){
    var ajaxSelectUrl = contextPath + '/manage/ordering/department/select';
    showSelectDlg("选择科室",ajaxSelectUrl,["table-data1"],setSelectValue);
}
function setSelectValue(obj){
    $("#departmentId").val(obj[0].id);
    $("#departmentName").val(obj[0].name);
}
jQuery(function($) {
    $("#birthday").datepicker({//日期选择器
        language : "zh-CN",
        format : 'yyyy-mm-dd',
        forceParse : true,
        pickTime : false,
        todayBtn : false,
        autoclose : true,
        minView : '2',
        forceParse : false
    });
    
    initFileUpLoad("formDlg");//上传组件初始化
    
    $('#formDlg').validate({
        errorElement : 'span',
        errorClass : 'help-block',
        focusCleanup : false,
        focusInvalid : false,
        onsubmit : false,
        rules : {
            "user.mobile":{required:true,maxlength:11,minlength:11},
            "departmentName":{required:true}
        },
        messages : {
            "user.mobile" : '请输入正确的手机号',
            "departmentName" : '请选择所属科室',
        },
        highlight : function(e) {
            $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
        },
        success : function(e) {
            $(e).closest('.form-group').removeClass('has-error').addClass('has-success');
            $(e).remove();
        },
    });
});

/**
 * 下载附件
 */
function downloadImg(id) {
//     var url = contextPath + "/manage/ordering/employee/downloadImg";
//     var inputs = "<input name=\"id\" value=\""+id+"\"/>";
//     jQuery('<form action="'+ url +'" method="post">' + inputs  + '</form>').appendTo('.row').submit().remove();
    var imgUrl = contextPath + '/manage/ordering/employee/showImg/'+id;;
	showImgDlg("图片预览",imgUrl);
}
//显示图片模态层
function showImgDlg(title, ajaxUrl){
    BootstrapDialog.show({
        type: BootstrapDialog.TYPE_DEFAULT,
        closable:false,
        draggable: true,
        title: title,
        message: $('<div></div>').load(ajaxUrl),
        buttons: [{
            id: 'btn-OK',   
            icon: 'glyphicon glyphicon-remove',
            label: '关闭',
            cssClass: 'btn-default', 
            autospin: false,
            action: function(dialogRef){
                dialogRef.close();
            }
        }]
    });
}
/**
 * 删除附件，根据path真实路径删除文件，并且更新实体
 */
function deleteImg(obj,id,fileInputName,divId){
    if (confirm("你确认要删除该附件吗？")) {
        $.ajax({
            url : contextPath + "/manage/ordering/employee/deleteImg",
            type : "post",
            data : {
                'id' : id
            },
            success : function() {
                CmMsg.info("删除照片成功", 0);//提示消息
                $("#photoName").val("");
                $("#photoImg").val("");
                $("#photoUrl").val("");
                $(obj).parent().parent().parent().remove();
                addFileUpload(divId,fileInputName);
            }
        });
    }
}
</script>